<template>
    <div class="container">
        <div class="row">
            <div class="row-title">
                <div>
                    Hotel
                </div>
            </div>
            <div class="content">
                <div class="left-box" style="background: url('/src/assets/img/hotel_bg_001.jpg') ">
                    <div class="left-title">
                        Stay Here
                    </div>
                    <div class="left-content">
                        Discover the most popular hotels in the world, compare prices and book online,
                        recommendations from fellow travelers and special hotel offers
                    </div>
                    <div class="left-button" @click="$router.push('/hotel')">
                        View More
                    </div>
                </div>
                <div class="slide-box">
                    <el-carousel :autoplay="false" :loop="false" v-if="hotelSwiper.length > 0">
                        <el-carousel-item v-for="(slide,index) in  Math.ceil(hotelSwiper.length/3) " :key="index">
                            <el-row :gutter="40">
                                <el-col class="item" :span="8" v-for="hotel in hotelSwiper.slice(index*3,Math.min((index+1)*3,hotelSwiper.length))" :key="hotel.id" @click="$router.push(`/hotel/detail/${hotel.id}`)"  style="cursor:pointer">
                                    <el-image fit="cover" :src="hotel.cover"></el-image>
                                    <div class="title ellipsis">{{ hotel.name }}</div>
                                    <el-rate v-model="hotel.rate" disabled text-color="#ff9900" show-text :texts="['Bad😞', 'Disappointed😒', 'Normal', 'Good!👍', 'Great!👏']"></el-rate>
                                    <div class="price">From <span>{{hotel.price}}$</span></div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <el-empty v-else description="No Hotel Found" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row-title">
                <div>
                    Tour
                </div>
            </div>
            <div class="content">
                <div class="left-box">
                    <div class="left-title">
                        Choose a tour group
                    </div>
                    <div class="left-content">
                        Tour groups offer organized itineraries to facilitate group sightseeing.
                    </div>
                    <div class="left-button"  @click="$router.push('/tour')">
                        View More
                    </div>
                </div>
                <div class="slide-box">
                    <el-carousel :autoplay="false" :loop="false" v-if="tourSwiper.length > 0">
                        <el-carousel-item v-for="(slide, index) in  Math.ceil(tourSwiper.length/3) " :key="index">
                            <el-row :gutter="40">
                                <el-col class="item" :span="8" v-for="tour in tourSwiper.slice(index*3,Math.min((index+1)*3,tourSwiper.length))"  :key="tour.id" @click="showTourDetails(tour)"  style="cursor:pointer"> 
                                    <el-image fit="cover" :src="tour.cover" ></el-image>
                                    <div class="title ellipsis" >{{ tour.name }}</div>
                                    <div class="duration">⏱️Duration: {{ tour.duration }} Days</div>
                                    <div class="price">From <span>{{tour.price}}$</span></div>
                                </el-col>
                            </el-row>
                        </el-carousel-item>
                    </el-carousel>
                    <el-empty v-else description="No Tour Found" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row-title">
                <div>
                    Blog
                </div>
            </div>
            <div class="n_content" v-if="blogSwiper.length > 0">
                <ul>
                  <li v-for="blog in blogSwiper" :key="blog.id" @click="$router.push(`/blog/detail/${blog.id}`)">
                    <div class="left"><img :src="blog.cover" alt=""></div>
                    <div class="right">
                      <div class="name"><h2>{{ blog.title }}</h2></div>
                      <div class="author"><span>{{ blog.authorName }}</span></div>
                      <div class="intro ellipsis"><p v-html="blog.content"></p></div>
                      <div class="time">Published Date: {{ formatTime(blog.createTime) }}</div>
                    </div>
                  </li>
                </ul>
            </div>
            <el-empty v-else description="No Blog Found" />
        </div>


      <!-- tour detail dialog -->
      <el-dialog v-model="tourDialogVisible">
        <div class="tourDialog">
          <div class="header">
            <h1>{{selectedTour.name }}</h1>
          </div>
          <img :src="selectedTour.cover">
          <p class="desc"><el-icon><Timer /></el-icon>Duration: {{selectedTour.duration }} day</p>
          <p class="desc"><el-icon><Position /></el-icon>Position: {{selectedTour.position }}</p>
          <div class="overview">
            <h2>------Overview------</h2>
            <p>{{selectedTour.overview }}</p>
          </div>
          <div class="price">
            <p>Price: <span>{{selectedTour.price }}$</span></p>
            <el-button type="warning" @click="addToOrder()">Add to Order</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script setup>
import { globalSearchService } from '@/api/search.js';
import { useUserStore } from '@/stores/user';
import { formatTime } from '@/utils/format.js';
import request from '@/utils/request.js';
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const userStore = useUserStore()
const keyword = ref(userStore.keyword)

let hotelSwiper = ref([])
let tourSwiper = ref([])
let blogSwiper = ref([])

async function getSearchResult(){
    const res = await globalSearchService(keyword.value)
    const searchResults = res.data.data    
    hotelSwiper.value = searchResults.hotels
    tourSwiper.value = searchResults.tours
    blogSwiper.value = searchResults.blogs    
}

onMounted(() => {
    getSearchResult()
})

watch(()=>userStore.keyword,()=>{
  router.go(0)
})

//show tour
const selectedTour = ref();
const tourDialogVisible = ref(false);
function showTourDetails(tour) {
  tourDialogVisible.value = true
  selectedTour.value = tour;
}

async function addToOrder(){
  await request.post('/order/add',{
    goodType:"Tour",
    goodId: selectedTour.value.id,
    goodName: selectedTour.value.name,
    price:selectedTour.value.price
  })
  ElMessage.success("Add tour successfully")
}


</script>

<style scoped lang="less">
.container {
    width: 70vw;
    margin: 0 auto;
    padding-bottom: 40px;
}

.row-title {
    font-size: 26px;
    font-weight: 600;
    display: flex;
    margin: 20px 0;

    &>div {
        position: relative;

        &:after {
            content: '';
            display: block;
            width: 100%;
            height: 5px;
            background-color: #00a8ff;
            bottom: 30px;
        }
    }

}

.content {
    display: flex;



    .left-box {
        width: 230px;
        height: 300px;
        background: url(../assets/img/fl.jpg) no-repeat;
        background-size: 100% 100%;
        position: relative;
        border-radius: 3px;
        padding: 15px 15px;
        margin-right: 15px;

        .left-title {
            color: #fff;
            font-size: 28px;
            font-weight: 600;
        }

        .left-content {
            color: #fff;
            font-size: 13px;
        }

        .left-button {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background-color: #fff;
            border-radius: 3px;
            padding: 5px 15px;
            font-size: 13px;
            cursor: pointer;

            &:hover {
                transform: translateY(-2px)
            }
        }
    }


    .slide-box {
        flex: 1;

        .el-row {
            display: flex;
            padding-right: 27px;

            .el-col {
                height: 296px;
                border-radius: 5px;
                overflow: hidden;


                &.item {
                    box-shadow: 3px 3px 5px #eee;
                }

                .grey {
                    background-color: #ccc;
                    width: 100%;
                    height: 100%;
                }

                .flag-img {
                    display: flex;
                    align-items: center;
                    font-size: 26px;
                    font-weight: bold;
                    padding: 15px 0 10px 15px;

                    .el-image {
                        width: 50px;
                        height: 50px;
                        margin-right: 10px;
                    }
                }

                .profile-img {
                    display: flex;
                    align-items: center;
                    padding: 0 0 10px 15px;

                    .el-image {
                        width: 55px;
                        height: 55px;
                        margin-right: 5px;
                    }
                }

                .desc {
                    font-size: 12px;
                    padding-left: 15px;
                }
            }

            .el-image {
                width: 100%;
            }
        }
    }
}

.price {
    color:red;

    span {
        font-style: italic;
        font-weight: 700;
        font-size: 18px;
    }

}

.duration {
    color: gray;
    
}

.n_content {
    margin-top: 30px;
    padding: 0 10px;

    li {
      cursor: pointer;
      height: 220px;
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      padding: 10px;
      border-radius: 10px;
      background-color: #f8f8f8;

      .left {
        img {
          width: 300px;
          height: 200px;
          margin-right: 10px;
          border-radius: 10px;
          object-fit: contain;
        }
      }

      .right {
        .name {
          height: 35px;
          margin-bottom: 15px;
          overflow-y: hidden;
        }


        .intro p {
          height: 65px;
          font-size: 15px;
          color: gray;
          margin-top: 10px;
        }
        .ellipsis{
          -webkit-line-clamp: 3;
        }
        .time {
          margin-top: 20px;
          color: gray;
        }
      }
    }
  }
  .tourDialog {
    p {
      font-size: 20px;
    }
  
    .header {
      text-align: center;
      width: 100%;
      height: 80px;
      color: #005096;
    }
    img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 10px;
      margin: 10px 0;
    }
    .desc {
      font-weight: 700;
    }
    .overview {
      text-align: center;
      margin: 10px 0;
  
      h2{
        color: #00bcd4;
        margin-bottom: 10px;
      }
    }
    .price {
      margin-top: 10px;
      font-style: italic;
      text-align: right;
      span {
        font-size: 30px;
        font-weight: 700;
        color: red;
      }
      .el-button {
        zoom: 1.5;
      }
    }
  }

  
</style>